<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>MEDISYS</title>
	<h:outputStylesheet library="css" name="iconos.css" />
</h:head>
<h:body>
	<p:layout fullPage="true">
		<p:layoutUnit position="north" size="50"
			header="MEDISYS - SISTEMA MEDICO" resizable="false"
			closable="false" collapsible="false">
		</p:layoutUnit>
		<p:layoutUnit position="center">
			<p:growl id="growl" showDetail="true" life="3000" />
			<h:form id="form">
				<p:tab id="personal" title="Personal">
					<p:panel header="INICIO DE SESION"
						style="width:275px;height:380px;text-align:center;position:absolute;top:50%;left: 50%;margin-top:-200px;margin-left:-100px;">
						<h:panelGrid columns="1" rows="3" cellpadding="5">
							<p:graphicImage value="../../resources/images/iconos/1.png" />
							<h:outputText value="USUARIO" />
							<p:inputText value="#{loginBean.username}" required="true" />
							<p:graphicImage value="../../resources/images/iconos/2.png" />
							<h:outputText value="CLAVE" />
							<p:password value="#{loginBean.password}" required="true"
								feedback="true" promptLabel="POR FAVOR INGRESE SU CLAVE"
								weakLabel="DEBIL" goodLabel="BUENO" strongLabel="FUERTE" />
							<p:spacer height=" 1" />
							<p:commandButton value="ENTRAR" icon="icon-3"
								actionListener="#{loginBean.login}" update=":growl"
								oncomplete="handleLoginRequest(xhr, status, args)" />
						</h:panelGrid>
					</p:panel>
				</p:tab>
			</h:form>
		</p:layoutUnit>
		<script type="text/javascript">
			function handleLoginRequest(xhr, status, args) {
				if (args.validationFailed || !args.loggedIn) {
					jQuery('#dialog').effect("shake", {
						times : 5
					}, 100);
				} else {
					dlg.hide();
					jQuery('#loginLink').fadeOut();
				}
			}
		</script>
	</p:layout>
</h:body>
</html>